<template>
  <div class="product">
    <transition name="fade">
      <router-view />
    </transition>

    <!-- <router-view /> -->
  </div>
</template>

<script>
export default {
  name: "product",
};
</script>

<style lang="scss" scoped>
.product {
  font-family: DianHei-5;
}

.fade-enter-active,
.fade-leave-avtive {
  transition: opacity 1s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.product {
  width: calc(
    100vw - 270px - 10px - 30px * 2 + 10px
  ); // 减nav的宽度、滚动条宽度、padding
  margin: 60px 0 0 0px;
  height: calc(100vh - 60px);
  position: relative;
  padding: 0px 30px 0px 30px;
  overflow-y: scroll;
}
.product::-webkit-scrollbar {
  width: 10px;
}
.product::-webkit-scrollbar-track {
  background: #f2f2f2;
}
.product::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
}
.product::-webkit-scrollbar-thumb:hover {
  background: #e2e2e2;
}
.product::-webkit-scrollbar-thumb:active {
  background: rgba(0, 0, 0, 0.2);
}
</style>